<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" />

    <script>
      const input = document.querySelector('input')

      input.onchange = (e) => {
        const file = input.files[0]
        console.log('需要上传的文件:', file)
        if (!file) {
          alert('文件异常')
          return
        }

        // 每一个分片是10MB
        const result = splitFile(file, 1024 * 1024 * 10)
        console.log('分片结果:', result)
        // 输出 (11) [FormData, FormData, FormData, FormData, FormData, FormData, FormData, FormData, FormData, FormData, FormData] 
      }

      function splitFile(file, chunkSize) {
        let index = 0
        let result = []

        while (chunkSize * index <= file.size) {
          const [name, type] = file.name.split('.')

          // 分片大小
          const bold = file.slice(
            chunkSize * index,
            chunkSize * (index + 1 )
          )

          // 分片文件
          const boldFile = new File([bold], `${name}${index}.${type}`)

          // formData用于向服务器发送数据 
          const formData = new FormData()
          formData.append('file', boldFile)

          result.push(formData)

          index++
        }

        return result
      }
    </script>
  </body>
</html>
